<!--
 * @Descripttion: 设备数据类型列表
 * @LastEditors: xzh
 * @LastEditTime: 2024-06-10 13:16:41
-->
<template>
  <el-card class="el-card-bottom-top">
    <template #header>
      <span>{{
        $t(`page.dashboardManageArr.equipDashboardArr.${equipDataType}`)
      }}</span>
      <el-date-picker
        v-model="dateValue"
        unlink-panels
        type="daterange"
        :start-placeholder="$t('common.statrDate')"
        :end-placeholder="$t('common.endDate')"
        :shortcuts="Dile_Methods.getShortcuts()"
        size="small"
        @change="handleRefresh"
      />
      <el-button
        :icon="Download"
        circle
        size="small"
        @click="handleExportData"
      />
    </template>
    <!-- 选择对象表格 -->
    <DileTable
      :class="
        [equipDataTypeEnum.shapingEquip, equipDataTypeEnum.otherEquip].includes(
          //@ts-ignore
          equipDataType
        ) && !!tableCloumnArr.find((x:object_Inf) => x.childern?.length > 0)
          ? 'hide-colgroup'
          : ''
      "
    >
      <template #preColumn>
        <template v-for="(column, index) in tableCloumnArr" :key="column.field">
          <vxe-colgroup
            v-if="(column.childern || []).length > 0"
            align="center"
            :title="
              $t(column.title) + (!!column.unit ? `(${column.unit})` : ``)
            "
          >
            <vxe-column
              v-for="child in column.childern"
              :field="child.field"
              :key="child.field"
              :min-width="80"
              :width="child.width || ''"
              :formatter="column.formatter"
            />
          </vxe-colgroup>
          <vxe-column
            v-else
            :field="column.field"
            :min-width="130"
            :width="column.width || ''"
            :title="
              $t(column.title) + (!!column.unit ? `(${column.unit})` : ``)
            "
            :formatter="column.formatter"
          />
        </template>
      </template>
    </DileTable>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, provide, watch, computed } from "vue";
import { equipDataTypeEnum } from "../index.type";
import { propsParam_Inf } from "@/components/dile-table/index.type";
import { Download } from "@element-plus/icons-vue";
import { dayjs } from "element-plus";
import { object_Inf } from "@/utils/typings/index.type";
import DileTable from "@/components/dile-table/index.vue";
import EquipDataTypeListUtils from "./utils";
import Dile_StoreAction from "@/utils/cache/store";
import Dile_Methods from "@/utils/methods";
import Dile_APi from "@/api";

const props = defineProps({
  //设备数据类型
  equipDataType: {
    type: String,
    requited: true,
    default: "",
  },
  dataArr: {
    type: Array,
    requited: true,
    default: [],
  },
});
/**
 * @Author: xzh
 * @Descripttion: 日期值
 * @Param:
 */
let dateValue = ref<any>([
  Dile_Methods.getDefaultToDay(),
  Dile_Methods.getDefaultToDay(),
]);

watch(
  () => props.dataArr,
  () => {
    initTableData();
  }
);

/**
 * @Author: xzh
 * @Descripttion: 表格列
 * @Param:
 * @param {*} computed
 */
let tableCloumnArr = computed(() => {
  let { equipDataType } = props,
    { name: factoryName } = Dile_StoreAction.getCurrentFactory();

  return (
    EquipDataTypeListUtils.tableColumnMap[equipDataType]?.filter(
      (x: object_Inf) =>
        !(
          (EquipDataTypeListUtils.filterClounmMap[factoryName] || {})[
            equipDataType
          ] || []
        ).includes(x.field)
    ) || []
  );
});

/**
 * @Author: xzh
 * @Descripttion: 加载列表数据
 * @Param:
 */
let initTableData = async () => {
  let { equipDataType } = props;
  Object.assign(propsParam, {
    tableData: props.dataArr,
    loading: false,
  });
};

/**
 * @Author: xzh
 * @Descripttion:刷新事件
 * @Param:
 */
let handleRefresh = async () => {
  try {
    propsParam.loading = true;
    //获取时间范围
    let [startDate, endDate] = dateValue.value.map((x: any) =>
        dayjs(x).format("YYYY-MM-DD")
      ),
      { equipDataType } = props;
    let apiMap = {
      [equipDataTypeEnum.shapingEquip]: "getShapingEquipData",
      [equipDataTypeEnum.otherEquip]: "getOtherEquipData",
      [equipDataTypeEnum.sideCutEquip]: "getSideCutEquipData",
      [equipDataTypeEnum.esgElectricEquip]: "getEsgElectricEquipData",
      [equipDataTypeEnum.esgFlowmeterEquip]: "getEsgFlowmeterEquipData",
    };
    //刷新对应表格数据
    propsParam.tableData = (
      await Dile_APi[apiMap[equipDataType]]({
        startDate,
        endDate,
      })
    ).map((x: object_Inf) => {
      let { date, name, type, electricEnergy, flowRate } = x;
      return ![
        equipDataTypeEnum.esgElectricEquip,
        equipDataTypeEnum.esgFlowmeterEquip,
      ].includes(equipDataType as equipDataTypeEnum)
        ? { ...x }
        : {
            acquisitionTime: date,
            deviceNo: name,
            deviceBrand: type,
            ecTotal: electricEnergy,
            flowTotal: flowRate,
          };
    });
  } finally {
    propsParam.loading = false;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 导出数据
 * @Param:
 */
let handleExportData = async () => {
  //获取时间范围
  let [startDate, endDate] = dateValue.value.map((x: any) =>
      dayjs(x).format("YYYY-MM-DD")
    ),
    { equipDataType } = props;
  let apiMap = {
    [equipDataTypeEnum.shapingEquip]: "exporShapingEquipData",
    [equipDataTypeEnum.otherEquip]: "exporOtherEquipData",
    [equipDataTypeEnum.sideCutEquip]: "exporSideCutEquipData",
    [equipDataTypeEnum.esgElectricEquip]: "exportEsgElectricEquipData",
    [equipDataTypeEnum.esgFlowmeterEquip]: "exportEsgFlowmeterEquipData",
  };
  let res = await Dile_APi[apiMap[equipDataType]]({
    startDate,
    endDate,
  });
  //导出文件
  Dile_Methods.handleFile(res);
};

/**
 * @Author: xzh
 * @Descripttion: 表格参数
 * @Param:
 */
let propsParam = reactive<propsParam_Inf>({
  loading: true,
  tableData: [],
  isPagination: false,
  bottomUp: true,
  maxHeight: 500,
  emitEvents: {
    refreshTable: initTableData,
  },
});
provide("propsParam", propsParam);
</script>
<style lang="scss" scoped>
.el-card-bottom-top {
  :deep(.el-card__header) {
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    > .el-date-editor {
      flex: 13rem 0 0;
    }
  }
  :deep(.el-card__body) {
    .hide-colgroup {
      thead {
        > tr:last-child {
          display: none;
        }
      }
    }
  }
}
</style>
